<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>设置密码</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" type="text/css" href="../../css/sqc.css">
</head>
<style>
	[v-cloak] {
		display: none
	}

	html {
		background-color: #fff;
	}
</style>

<body style="height:100%;background:#fff;margin: 0 auto">
	<div id="blank" class="header" v-cloak>
		<div v-back.tapmode class="back"></div>
	</div>
	<div id="app" style="padding: 0 5%;" v-cloak>
		<div style="height:60px;"></div>
		<div class="select-title-text">是否替换头像和昵称</div>
		<div class="select-title" style="margin-top: 10px">替换有利于你的好友更快速的找到你</div>
		<div class="userMessage-box">
			<div class="first-message">
				<div class="left-text" style="color: #A9A9A8">当前信息:</div>
				<div class="right-text">
					<img :src="user.portrait" style="margin-top: 25%; " class="user-head">
					<div style="text-align: center;width: 5rem;color: #A9A9A8;margin-top: 10%; white-space:nowrap">
						{{user.nickname}}</div>
				</div>
			</div>
			<img src="../../image/profile_photo_arrows.png" style="width:30px;display:inline-block;margin: 10px 45%;" alt="">
			<div class="wx-message">
				<div class="left-text">替换信息</div>
				<div class="right-text">
					<img :src="usermessage.headimgurl" style="margin-top: 25%; " class="wx-head">
					<div class="user-wx-nickname" v-show="iptshow" v-myclick="modificationNickname">
						{{nickname}}
						<div class="text-length"><span :class="{'warn-text':nicknameLength > 16}">{{nicknameLength}}</span>/16</div>
					</div>
					<input type="text" ref="inputVal" v-show="!iptshow" value="nickname" v-model="nickname"
						@blur="modificationNickname">
				</div>
			</div>
		</div>
		<div class="warn_box" v-show="warn_box">{{warn_text}}</div>
		<div class="replace-box">
			<div class="replace-false" v-myclick="openIndex">不替换</div>
			<div class="replace-true" v-myclick="updUser" v-show="!warn_box">替换</div>
			<div class="replace-true" style="background-color: #ccc;" v-show="warn_box">替换</div>
		</div>
	</div>

	<script src="../../script/api.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/url.js"></script>
	<script src="../../script/components.js"></script>
	<script>
		var wap_url,
			talkingData,
			vm,
			user,
			usermessage,
			nicknameLength

		apiready = function () {
			new Vue({
				el: '#blank',
			});
			usermessage = api.pageParam
			nicknameLength = usermessage.nickname.length
			var data = {
				member_id: getPrefs('member_id')
			};
			var callback = function (ret) {

				user = ret.content;
				console.log(JSON.stringify(user))
				initApp();
			}
			pinet.post(URL.getUserinfo, data, callback);
			// initApp();
			api.parseTapmode();
		};

		function initApp() {

			vm = new Vue({
				el: '#app',
				data: {
					usermessage: usermessage,
					user: user,
					nickname: usermessage.nickname,
					iptshow: true,
					nicknameLength: nicknameLength,
					warn_text: '',
					warn_box: false,
				},
				methods: {
					clearMessage: function () {
						user = '';
						usermessage = '';
					},
					modificationNickname() {
						if (this.iptshow) {
							this.$nextTick(function () {
								//DOM 更新了
								// console.log(2)
								this.$refs.inputVal.focus()
							})
						}
						// console.log(1)
						this.iptshow = !this.iptshow
					},
					openIndex: function () {
						vm.clearMessage()
						api.openWin({
							reload: true,
							name: 'index',
							url: '../../index.html',
							hScrollBarEnabled: false,
							slidBackEnabled: false,
						});
						
					},
					updUser: function () {
						var data = {
							member_id: getPrefs('member_id'),
							nickname: this.nickname,
							portrait: this.usermessage.headimgurl,
						};
						var callback = function (ret, err) {
							var user = JSON.parse(getPrefs('user'));
							user.nickname = vm.nickname;
							user.portrait = vm.usermessage.headimgurl;
							setPrefs('user', user);
							vm.openIndex()
						};
						var errback = function (ret) {
							// console.log(JSON.stringify(ret));
							this.warn_text = ret.message;
							this.warn_box = true;
						};
						pinet.post(URL.updUserInfo, data, callback, errback);
					}
				},
				watch: {
					nickname: function () {
						this.nicknameLength = this.nickname.length;
						if (this.nicknameLength > 16) {
							this.warn_text = '昵称最大长度为16位';
							this.warn_box = true;
						} else if (/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig.test(this.nickname)) {
							this.warn_text = '昵称中不可含有特殊字符';
							this.warn_box = true;
						} else {
							this.warn_text = '';
							this.warn_box = false;
						}
					}
				}
			})
		}

	</script>
</body>

</html>